<template>
	<view class="personal-center">
		<!-- 顶部用户信息区域 -->
		<view class="user-header">
			<view class="user-info">
				<view class="avatar-container" @click="goToProfile">
					<image class="user-avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
					<view class="avatar-edit">
						<text class="edit-icon">✏️</text>
					</view>
				</view>
				<view class="user-details">
					<view class="user-name" @click="goToProfile">
						{{ userInfo.name || '点击设置昵称' }}
					</view>
					<view class="user-desc">
						{{ userInfo.note || '这个人很懒，什么都没留下' }}
					</view>
				</view>
			</view>
		</view>


		<!-- 设置区域 -->
		<view class="settings-section">

			<view class="setting-item" @click="goToProfile">
				<view class="setting-left">
					<text class="setting-icon">👤</text>
					<text class="setting-text">个人资料</text>
				</view>
				<text class="setting-arrow">></text>
			</view>
			<view class="setting-item" @click="goToJoin">
				<view class="setting-left">
					<text class="setting-icon">🎯</text>
					<text class="setting-text">报名记录</text>
				</view>
				<text class="setting-arrow">></text>
			</view>
			<view v-if="userInfo.curatorState===0||userInfo.curatorState===2" class="setting-item" @click="showApplyCurator">
				<view class="setting-left">
					<text class="setting-icon">⚙️</text>
					<text class="setting-text">主理申请</text>
				</view>
				<text class="setting-arrow">></text>
			</view>
			<view class="setting-item" @click="showAbout">
				<view class="setting-left">
					<text class="setting-icon">ℹ️</text>
					<text class="setting-text">关于我们</text>
				</view>
				<text class="setting-arrow">></text>
			</view>

		</view>

	</view>
</template>

<script setup>
import { useShowData } from '@/common/data.js'
import { ref } from 'vue'
const {data:userInfo}=useShowData("current_user", {})


const recentRecords = ref([])
const showAboutModal = ref(false)
const defaultAvatar = '/static/logo.png'




// 跳转到个人资料页面
const goToProfile = () => {
	uni.navigateTo({
		url: '/pages/my/profile'
	})
}

// 跳转到报名记录页面
const goToJoin = () => {
	uni.navigateTo({
		url: '/pages/my/join'
	})
}

// 查看全部记录
const showApplyCurator = () => {
	if(userInfo.value.curatorState===2){
		uni.showToast({
			title: '主理资料审核中!请耐心等待',
			icon: 'none'
		})
		return;
	}


	uni.navigateTo({
		url: '/pages/my/apply_curator'
	})
}

// 查看记录详情
const viewRecord = (record) => {
	uni.showToast({
		title: `查看${record.title}`,
		icon: 'none'
	})
}

// 显示关于我们
const showAbout = () => {
	uni.navigateTo({
		url: '/pages/my/about_us'
	})
}

// 隐藏关于我们
const hideAbout = () => {
	showAboutModal.value = false
}

// 显示设置
const showSettings = () => {
	uni.showToast({
		title: '设置功能开发中',
		icon: 'none'
	})
}

</script>

<style scoped>
.personal-center {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 用户头部区域 */
.user-header {
	background: linear-gradient(135deg, #AA0E99, #8B5CF6);
	padding: 40rpx 30rpx 60rpx;
	color: white;
}

.user-info {
	display: flex;
	align-items: flex-start;
}

.avatar-container {
	position: relative;
	margin-right: 30rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-edit {
	position: absolute;
	bottom: -5rpx;
	right: -5rpx;
	width: 40rpx;
	height: 40rpx;
	background: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.edit-icon {
	font-size: 20rpx;
}

.user-details {
	flex: 1;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.user-desc {
	font-size: 28rpx;
	opacity: 0.8;
	margin-bottom: 20rpx;
}

.user-stats {
	display: flex;
	gap: 40rpx;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-number {
	font-size: 32rpx;
	font-weight: bold;
}

.stat-label {
	font-size: 24rpx;
	opacity: 0.8;
	margin-top: 5rpx;
}

/* 功能菜单区域 */
.menu-section {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.menu-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	color: #333;
}

.menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30rpx;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	border-radius: 15rpx;
	background: #f8f9ff;
	transition: all 0.3s;
}

.menu-item:active {
	background: #e8e9ff;
	transform: scale(0.95);
}

.menu-icon {
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 15rpx;
}

.menu-icon image {
	width: 100%;
	height: 100%;
}

.menu-text {
	font-size: 26rpx;
	color: #666;
	text-align: center;
}

/* 记录区域 */
.record-section {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.section-more {
	font-size: 26rpx;
	color: #AA0E99;
}

.record-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.record-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f8f9ff;
	border-radius: 15rpx;
}

.record-icon {
	width: 60rpx;
	height: 60rpx;
	background: #AA0E99;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.record-type {
	color: white;
	font-size: 24rpx;
}

.record-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.record-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 5rpx;
}

.record-time {
	font-size: 24rpx;
	color: #999;
}

.record-arrow {
	font-size: 30rpx;
	color: #ccc;
}

/* 设置区域 */
.settings-section {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.setting-item:last-child {
	border-bottom: none;
}

.setting-left {
	display: flex;
	align-items: center;
}

.setting-icon {
	font-size: 32rpx;
	margin-right: 20rpx;
}

.setting-text {
	font-size: 30rpx;
	color: #333;
}

.setting-arrow {
	font-size: 30rpx;
	color: #ccc;
}

/* 弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: white;
	border-radius: 20rpx;
	width: 600rpx;
	max-height: 80vh;
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.modal-close {
	font-size: 40rpx;
	color: #999;
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-body {
	padding: 30rpx;
}

.about-content {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.about-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}
</style>
